{extend name="../public/header" /}
{block name="body"}
<body>
	<div class="subject">
		<div class="layui-fluid" style="background-color: #f8f8f8;">
			<div class="layui-row">
				<form class="layui-form" action='{:url("add")}'>
					<div class="layui-form-item" style="width: 100%;text-align: center;">
						<img id="imgRole" src="/public/admin/image/nv.jpg" style="width: 60%;">
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">角色昵称</label>
						<div class="layui-input-block">
							<input type="text" name="uname" required lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-block">
							<input type="radio" lay-filter="usex" name="usex" value="1" title="男">
							<input type="radio" lay-filter="usex" name="usex" value="2" title="女" checked>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="*">创建</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
{/block}
{block name="script"}
<script>
layui.use(['jquery','form','laydate','upload','element'], function(){
	var $ = layui.jquery
	,laydate = layui.laydate
	,upload = layui.upload
	,element = layui.element
	,form = layui.form;

	form.on('radio(usex)', function(data){
		console.log(data.value);
		var usex = data.value;

		if(usex==1){
			$('#imgRole').attr('src','/public/admin/image/nan.jpg');
		}
		if(usex==2){
			$('#imgRole').attr('src','/public/admin/image/nv.jpg');
		}
	});

	form.render();
});
</script>
{/block}
